<template>
  <div class="x6-menu-item">
    <button class="x6-menu-item-button">
      <!-- <span class="x6-menu-item-icon"
        ><span role="img" aria-label="copy" class="anticon anticon-copy">
          <svg-icon :icon-class="icon" /> </span></span
      > -->
      <span class="x6-menu-item-text">
        {{ text }}
      </span>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      default: "",
    },
    text: {
      type: String,
      default: "",
    },
  },
};
</script>

<style scoped lang="less">
.x6-menu-item-button {
  padding-left: 30px;
  position: relative;
  display: flex;
  align-content: center;
  align-items: center;
  // justify-content: space-between;
  width: 100%;
  height: 28px;
  padding: 0 12px;
  color: #595959;
  text-align: left;
  background: 0 0;
  border: none;
  outline: none;
  box-shadow: none;
  cursor: pointer;
  &:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }
}
.x6-menu-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.x6-menu-item-text {
  padding-left: 10px;
  //  padding-right: 56px;
  overflow: hidden;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>